<template>
	<view class="info-list wrap-card border-b animate__animated animate__fadeInLeft animate__fast">
		<!-- 头像栏 -->
		<view class="flex flex-row justify-between items-center">
			<view class="flex flex-row justify-center items-center">
				<image class="img-header mr-10" :src="item.avatar" mode="widthFix" lazy-load
					@click.stop="handleAvatarClick()"></image>
				<view class="flex justify-center items-center text-gray-500 text-30">{{ item.username }}</view>
			</view>
		</view>

		<!-- 标题 -->
		<view class="w-100 line-1 text-32 my-10" @click="goDetail()">{{ item.title }}</view>

		<!-- 文本内容 -->
		<view class="text-gray-700 text-28 mb-20 line-clamp-2">
			{{ item.content }}
		</view>

		<!-- 底部统计 -->
		<view class="flex flex-row justify-between items-center text-gray-500 my-10">
			<view class="flex flex-row justify-center items-center">
				
			</view>
			<view class="flex flex-row justify-center items-center">
				<view class="flex flex-row justify-center items-center mr-20" @click="handleComment()">
					<view class="iconfont iconliaotian mr-10 text-36"></view>
					{{ item.comments }}
				</view>
				<view class="flex flex-row justify-center items-center" @click="handleView()">
					<view class="iconfont iconliulan mr-10 text-36"></view> 
					{{ item.views }} 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			required: true
		},
		index: {
			type: Number,
			default: 0
		}
	},
	methods: {
		handleAvatarClick() {
			const currentUserId = getApp().globalData.userId;
			if (this.item.userId == currentUserId) {
				uni.navigateTo({
					url: '/pages/mine/user-space'
				});
			} else {
				uni.navigateTo({
					url: `/pages/paper/friend_profile?userId=${this.item.userId}`
				});
			}
		},
		goDetail(postId) {
			uni.navigateTo({
				url: `/pages/home/detail?postId=${this.item.postId}`
			});
		},
		handleMark(type) {
			const newValue = type === 'smile' ? 1 : -1;
			this.$emit('mark', {
				value: type,
				index: this.index
			});
		},
		handleIcon(type, infoNum) {
			if (type === 'smile' && infoNum.index === 1) return 'text-green-500';
			if (type === 'cry' && infoNum.index === 2) return 'text-red-500';
			return '';
		},
		handleComment() {
			uni.showToast({ title: '查看评论', icon: 'none' });
		},
		handleView() {
			uni.showToast({ title: '浏览数', icon: 'none' }); 
		}
	}
};
</script>

<style lang="scss" scoped>
	.info-list {
		.img-header {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}

		.tag-age {
			background-color: $uni-color-blue;
			color: #FFFFFF;
			font-size: 24rpx;
			padding: 2rpx 10rpx;
			margin-left: 10rpx;
			border-radius: 20rpx;

			&.girl {
				background-color: $uni-color-pink;
			}
		}

		.icon-play {
			position: absolute;
			font-size: 120rpx;
			color: #FFF;
		}

		.play-info {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			color: #FFF;
			background-color: rgba(153, 153, 153, 0.75);
			border-radius: 50rpx;
			padding: 5rpx 20rpx;
			font-size: 25rpx;
		}

		.active {
			color: #19be6b;

			view {
				color: #19be6b;
			}
		}
	}
</style>